<template>
  <div class="box">
    <!-- 头部区域 -->
    <div class="boxtop">
      <van-nav-bar title="损伤拍照">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- 内容区域 -->
    <div class="BoxCenter">
      <!-- 损伤部位 -->
      <van-field
        readonly
        clickable
        :value="part"
        label="损伤部位"
        placeholder="请选择"
        @click="showPickerPart = true"
        right-icon="arrow"
      />
      <van-popup v-model="showPickerPart" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsPart"
          @confirm="onConfirmPart"
          @cancel="showPickerPart = false"
        />
      </van-popup>
      <!-- 损伤描述 -->
      <van-field
        readonly
        clickable
        :value="described"
        label="损伤描述"
        placeholder="请选择"
        @click="clickDamagePart"
        right-icon="arrow"
      />
      <van-popup v-model="showPickerdescribed" position="bottom">
        <van-picker
          show-toolbar
          @confirm="onConfirmdescribed"
          :columns="columnsdescribed"
          @cancel="showPickerdescribed = false"
        />
      </van-popup>
      <!-- 图片区域 -->
      <div class="injurypictrue">损伤拍照</div>
      <div class="BoxPictrue">
        <div class="pictueare">
          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            accept="image"
          >
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.content }}</div>
            </template>
          </van-uploader>
        </div>
      </div>
      <!-- 按钮区域 -->
      <div class="vvvv">
        <div class="buttonWai">
          <div class="buttonLeft" @click="ClickBack">
            <span>返回</span>
          </div>
          <div class="buttonRight" @click="saveFile">
            <span>保存</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { QueryDescrible, SavePart, GetEvaPartByIndexNo } from '@/api/user'
export default {
  data() {
    return {
      custIntentId: '',
      part: '',
      partCode: '',
      // 损伤部位
      columnsPart: [],
      partData: [],
      partcode1: '',
      showPickerPart: false,
      // 损伤描述
      described: '',
      // 损伤描述
      columnsdescribed: [],
      showPickerdescribed: false,
      // 照片区域
      fileList: [],
      // 定义两个对象用于路由传参
      Text: {},
      pictrue: {},
      // 保存参数
      objectData: {
        custIntentId: '',
        dmgCode: '',
        dmgName: '',
        dmgValue: 0,
        partCode: '',
        partName: '',
        partType: 0,
        dmgImg: ''
      },
      propertyData: [],
      describedData: [],
      // 父组件的数据
      queryData: {},
      activeName: ''
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      this.activeName = this.$route.query.activeName
      this.queryData.indexNo = this.$route.query.indexNo
      this.queryData.type = this.$route.query.type
      this.custIntentId = this.$route.query.custIntentId
      if (this.$route.query.item) {
        this.propertyData = this.$route.query.item
        this.part = this.propertyData.partName
        this.activeName = this.$route.query.activeName
        // 获取损伤描述
        try {
          const { data: describedData } = await QueryDescrible(
            this.propertyData.partCode
          )
          // 损伤描述
          this.describedData = describedData
          describedData.forEach((item, index) => {
            this.columnsdescribed.push(item.dmgItemName)
          })
        } catch (err) {
          console.log(err)
        }
      } else {
        try {
          const GetEvaPart = {
            indexNo: this.$route.query.indexNo,
            type: this.$route.query.type
          }
          const { data } = await GetEvaPartByIndexNo(GetEvaPart)
          console.log(data)
          this.part = data[0].partName
          console.log(this.part)
          // 获取损伤描述
          try {
            const { data: describedData } = await QueryDescrible(
              data[0].partCode
            )
            // 损伤描述
            this.describedData = describedData
            describedData.forEach((item, index) => {
              this.columnsdescribed.push(item.dmgItemName)
            })
          } catch (err) {
            console.log(err)
          }
        } catch (err) {
          console.log(err)
        }
      }
    },
    onConfirmPart(partCode) {
      console.log(partCode)
      this.showPickerPart = false
    },
    // 损伤描述
    onConfirmdescribed(value) {
      this.described = value
      console.log(value, 'oo')
      console.log(this.describedData)
      this.describedData.forEach((item) => {
        if (value == item.dmgItemName) {
          this.objectData.partCode = item.partCode
          this.objectData.dmgCode = item.dmgCode
          this.objectData.dmgName = item.dmgItemName
          this.objectData.dmgValue = item.dmgValue
        }
      })
      this.showPickerdescribed = false
    },
    // 保存
    async saveFile() {
      // if (this.part == "" || this.discribed == "" || this.fileList == "") {
      //   return this.$toast.fail("请填写完整");
      // }
      // 循环照片的数组，然后将内容铺设进去
      console.log(this.fileList)
      this.objectData.custIntentId = this.custIntentId
      this.objectData.partName = this.propertyData.partName
      this.objectData.partCode = this.propertyData.partCode
      this.objectData.evaType = this.propertyData.evaType
      this.activeName = this.$route.query.activeName
      const { data } = await SavePart(this.objectData)
      console.log(data)

      // if (this.activeName == 'a' || 'b' || 'c') {
      //   this.$router.push({
      //     path: '/cartest',
      //     query: {
      //       type: this.queryData.type,
      //       activeName: this.activeName,
      //       custIntentId: this.$route.query.custIntentId
      //     }
      //   })
      // } else {
      //   this.$router.push({
      //     path: '/accesspart',
      //     query: {
      //       type: this.queryData.type,
      //       activeName: this.activeName,
      //       custIntentId: this.$route.query.custIntentId
      //     }
      //   })
      // }
      //
      this.$router.push({
        path: '/cartest',
        query: {
          type: this.queryData.type,
          activeName: this.activeName,
          custIntentId: this.$route.query.custIntentId
        }
      })
      //
      // if (data.code == 200) {
      //   this.$router.push({
      //     path: "/cartest",
      //     query: {
      //       type: this.queryData.type,
      //       activeName: this.activeName,
      //       custIntentId: this.$route.query.custIntentId,
      //     },
      //   });
      // }
    },
    clickDamagePart() {
      this.showPickerdescribed = true
    },

    clickLeft() {
      this.$router.back()
    },
    afterRead(file, detail) {
      // 此时可以自行将文件上传至服务器
      console.log(this.fileList)
    },
    ClickBack() {
      this.$router.push({
        path: '/cartest',
        query: {
          type: this.queryData.type,
          activeName: this.activeName,
          custIntentId: this.$route.query.custIntentId
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 680px;
  position: relative;
}
.buttonWai {
  position: absolute;
  bottom: 60px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  .buttonLeft {
    color: #4397d4;
    width: 171px;
    height: 38px;
    border: 1px solid #4397d4;
    border-radius: 19px;
    text-align: center;
    line-height: 38px;
    margin-left: 10px;
  }
  .buttonRight {
    width: 171px;
    height: 38px;
    border: 1px solid #4397d4;
    border-radius: 19px;
    text-align: center;
    line-height: 38px;
    margin-right: 10px;
    background-color: #4397d4;
    color: #fff;
  }
}
.injurypictrue {
  margin-bottom: 16px;
  // margin-left: 16px;
  padding-left: 16px;
  color: #646566;
}
.BoxPictrue {
  display: flex;
  width: 100%;
  margin-top: 16px;
  // margin-left: 16px;
  // padding-left: 16px;
  font-size: 14px;

  .pictueare {
    // display: flex;
    // flex:1
    // display: inline-block;
    // width: 82px;
    // height: 82px;
    // border: 2px dashed  #b2b2b2;
    padding-left: 16px;
  }
  /deep/ .van-uploader__preview {
    margin-right: 40px;
  }
  // 带照片
  /deep/ .van-uploader__upload {
    border: 2px dashed #b2b2b2;
    width: 82px;
    height: 82px;
  }
  // 不带相机图片边框
  /deep/.van-uploader__preview-cover {
    border: 2px solid #b2b2b2;
  }
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.BoxCenter {
  margin-top: 11px;
  font-size: 14px;
}
</style>
